.expense-tracker {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #fff;
  
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      background-color: #f8f8f8;
      border-bottom: 1px solid #e0e0e0;
  
      .close-btn,
      .check-btn {
        font-size: 1.5rem;
        color: #333;
        cursor: pointer;
      }
  
      .nav-title {
        font-size: 1.2rem;
        font-weight: 500;
      }
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
  
      .categories-scroll {
        flex: 1;
  
        .categories-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1rem;
          padding: 1rem;
          min-height: 200%;
  
          .category-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem;
            border-radius: 8px;
            background-color: #f0f0f0;
            transition: background-color 0.3s;
  
            &.selected {
              background-color: #ff4d8f;
              color: #fff;
            }
  
            .icon {
              font-size: 2rem;
              margin-bottom: 0.5rem;
              height: 2.5rem;
            }
  
            .label {
              font-size: 0.8rem;
              text-align: center;
            }
          }
        }
      }
  
      .keypad {
        // 确保键盘不会被滚动区域覆盖
        flex-shrink: 0;
        background-color: #f8f8f8;
        padding: 0.11rem 1rem 0.1rem 1rem;
  
        .amount-display {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding: 0.5rem;
          background-color: #fff;
          border-radius: 8px;
          margin-bottom: 0.1rem;
          height: 0.5rem;
  
          .currency {
            color: #666;
            margin-right: 0.5rem;
          }
  
          .amount {
            font-size: 1.5rem;
            font-weight: 500;
          }
        }
  
        .keypad-container {
          display: flex;
          gap: 0.5rem;
          height: 9rem;
          .keypad-grid {
            flex: 3;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 0.5rem;
          }
  
          .operators-grid {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(5, 1fr);
            gap: 0.5rem;
          }
  
          .keypad-button {
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            min-height: 48px;
            cursor: pointer;
  
            &.operator-btn {
              background-color: #f0f0f0;
  
              &.active {
                background-color: #ff4d8f;
                color: #fff;
              }
            }
  
            &.equals-btn {
              background-color: #ff4d8f;
              color: #fff;
            }
  
            &.clear-btn {
              color: #ff4d4f;
            }
  
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
  
    .footer {
      display: flex;
      justify-content: space-around;
      padding: 0.5rem;
      background-color: #f8f8f8;
      border-top: 1px solid #e0e0e0;
  
      .footer-btn {
        font-size: 1rem;
        color: #333;
        cursor: pointer;
  
        &:hover {
          color: #ff4d8f;
        }
      }
    }
  }
  